<template>
	<div class="public-attribute">
		
		<transition leave-active-class='animated fadeOut fastFourMs'>
			<home-load v-if="login_show"></home-load>
		</transition>
		
		<div class="header-fixed">
			<home-header></home-header>
			<home-nav></home-nav>
		</div>
		
		<home-banner></home-banner>
		
		<home-list 
				:homeList='homeList'
		>
		</home-list>
		
		<home-error 
				@resendChange='resendChanges' 
				v-if='err_show'
		>
		</home-error>
		
		<div 
			class="login-more" 
			v-infinite-scroll="loadMore" 
			infinite-scroll-disabled="disable" 
			infinite-scroll-distance="100"
		>
			<p>
				{{loadMessage}}
			</p>
		</div>
		
	</div>
</template>

<script>
	import axios from 'axios'
	import HomeLoad from '../../common/CommonLoad'
	import HomeError from '../../common/CommonError'
	import HomeHeader from '../../common/CommonHeader'
	import HomeNav from '../../common/CommonNav'
	import HomeBanner from './components/Banner'
	import HomeList from './components/List'
	export default {
		name: 'home',
		components: {
			HomeLoad,
			HomeError,
			HomeHeader,
			HomeNav,
			HomeBanner,
			HomeList
		},
		data () {
			return {
				loadMessage: '加载中...',
				login_show: true,
				err_show: false,
				homeList: [],
				page: 1,
				page_size: 8,
				disable: true,
				showTopBack: false
			}
		},
		methods: {	
			getHomeData (flag) {
				var _this = this
				axios({
					method: 'get',
					url: '/page_lists/api_paging?page_num=' + _this.page + '&page_size=' + _this.page_size
				})
				.then( response=> {
					let res = response.data
					_this.err_show = false	
					_this.show_trans = true
					if (res.status == 0) {
						const data = res.data
						if (flag) {
							_this.homeList = _this.homeList.concat(data);
							if (res.count == 0) {
								_this.disable = true;
								_this.loadMessage = '暂无更多'
							} else {
								_this.disable = false;
							}
						} else {
							_this.homeList = data;
							_this.disable = false;
						}	
						
						if (!localStorage.getItem('user_first')) {
							setTimeout( ()=> {
								_this.login_show = false
							},2400)
							localStorage.setItem('user_first',1)
						} else {
							setTimeout( ()=> {
								_this.login_show = false
							},700)
						}
					}	
				})
				.catch( err=> {
					_this.login_show = false
					_this.err_show = true
					console.log('REQUEST ERROR:' + err)
				})
			},
			// 加载更多
			loadMore () {
				this.disable = true
				this.page++
				setTimeout( ()=> {
					this.getHomeData(true)
				},500)
			},
			// 重发请求
			resendChanges () {
				this.login_show = true
				this.getHomeData()
			}
			
// 			scrollToTop () {
// 				let _this = this
// 				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 				_this.scrollTop = scrollTop
// 				if (_this.scrollTop > 500) {
// 				  console.log('大于')
// 				  _this.showTopBack = true
// 				} else if (_this.scrollTop < 20) {
// 				  console.log('小于')
// 				   _this.showTopBack = false
// 				}
// 			}
		},
		mounted () {
			this.getHomeData()	
			//window.addEventListener('scroll', this.scrollToTop)	
		},
		watch: {
			$route: {
				handler (val, oldval){
					if (val.fullPath != '/') {
						this.disable = true
					} else {
						this.disable = false
					}
				}
			}
		}
// 		destroyed () {
// 			window.removeEventListener('scroll', this.scrollToTop)
// 		}
	}
</script>
<style lang="stylus" scoped>
	.home-there-figure
		padding:20px 22px
		margin-top:4px
		display:flex
		flex-direction:row
		.home-there-l
			width:70%
			height:380px
			border-radius:8px
			overflow:hidden
			background:blue
		.home-there-l img
			width:100%
			height:100%
		.home-there-r
			width:30%
			height:380px
			display:flex
			flex-direction:column
			align-items:center
		.home-there-r img
			width:100%
			height:100%
		.home-there-r-t
			width:94%
			height:190px
			background:green
			border-radius:8px
			overflow:hidden
		.home-there-r-b
			width:94%
			height:190px
			background:#666
			border-radius:8px
			overflow:hidden
			margin-top:6px
</style>
